import React, { Component } from 'react';
import { base, high, toast, ajax } from 'nc-lightapp-front';
// const { NCUploader } = high;
import NCUploader from 'uap/common/components/NCUploader';
import { languageCreateUIDOM, hrAjax } from 'src/hrpub/common/utils/utils';
import { getClientSize, getBEDateQueryCondition, getCurDayEndTs, getCurDayStartTs, formatTemplate, formatQueryCondition, formatValueByRow} from 'src/hrkq/statistics/common/utils';
import exportHtmlFunc from 'src/hrpub/common/utils/exportHtml';

// css
import './index.less';

// components
import Form from 'src/hrkq/statistics/common/components/Form';

import Header from '../components/Header';
import ImportDialog from '../components/Import';
import EditTable from '../components/EditTable';
import TableAbnormal from '../components/TableAbnormal';
import TableDetails from '../components/TableDetails';
import Pagination from 'src/hrpub/common/components/Pagination/index';

import config from '../config/index';
import formDownLoad, {getUrlParam} from "../../../public/download";

let { NCLoading, NCPagination, NCTabs, NCTabs: { NCTabPane }, NCInput, NCButton } = base;

export default class extends Component {
    constructor(props) {
        super(props);
        props.use.form('attendance_card', 'outside_card')
        props.use.editTable('attendance_list', 'outside_list')
        this.state = {
            lang: {},
            dist: 'list',
            // 窗口尺寸
            window: {
                ...getClientSize()
            },
            pageInfo: {
                pageSize: 10,
                pageIndex: 1,
                total: 0
            },
            tabActive: config.modules[0],
            tabs: [
                ...config.modules
            ],
            showUploader: false,
            billId: null
        };

        ['onTabChange', 'initTempalte', 'initData', 'onSearch',
            'onPageInfoChange', 'onResize', 'onImport', 'onExport', 'onExportWithOutQueryId', 'onExportWithInQueryId'].forEach(fun => {
            if (typeof this[fun] == 'function') {
                this[fun] = this[fun].bind(this);
            }
        })
    }

    showDeailFileBtn = (showFlag) => {
        this.props.button.setButtonVisible({
            file: showFlag
        })
    }

    onTabChange = (id) => {
        const { search: { clearSearchArea } } = this.props;
        const { tabs } = this.state,
            current = tabs.filter((tab) => {
                return tab.id == id;
            })[0];

        this.setState((state, props)=>{
            return {
                tabActive: current,
                pageInfo: {
                    ...state.pageInfo,
                    pageIndex: 1,
                    total: 0
                }
            };
        });

        this.queryParams = {};
        this.initData();
    }

    initTempalte = (callback) => {
        languageCreateUIDOM(this.props)({
            appcode: config['appcode'],
            pagecode: config['pagecode'],
        }, { ...config['mutilLang'] }, (metas, lang, intl) => {
            const props = this.props;
            const { button, template } = metas;
            const { meta } = props;

            this.setState({lang});

            meta.setMeta(template ? formatTemplate({ template, lang }) : {});
            props.button.setButtons(button);
            callback && callback();
        });
    }

    initData = () => {
        clearTimeout(this.initDataTimer);
        this.initDataTimer = setTimeout(() => {
            const { meta, editTable: { setTableData }, search: { getQueryInfo, clearSearchArea } } = this.props;
            const { tabActive } = this.state;
            this.setState({ loading: true });
            this.queryListAction({
                ...this.queryParams
            }).then(({
                success,
                data = {}
            } = {}) => {
                if (success) {
                    if (tabActive.tableId) {
                        const { pageid,
                                templetid,
                                [tabActive.tableId]: {
                                    pageInfo: { total = 0 } = {},
                                    areacode,
                                    rows = []
                                } = {}
                            } = data;
                        this.onPageInfoChange({
                            total
                        });
                        setTableData(tabActive.tableId, { rows })
                    } else {
                        let {
                            content = [],
                            totalElements = 0,
                            numberOfElements = 0,
                            pageable: {
                                offset,
                                pageNumber,
                                pageSize,
                            } = {}
                        } = data;

                        this.onPageInfoChange({
                            // pageIndex: pageNumber,
                            // pageSize,
                            total: totalElements
                        });

                        this.setState((state, props) => {
                            let current = state.tabs.filter((tab) => {
                                return tab.id == tabActive.id;
                            })[0];
                            current.data = content;

                            return {
                                tabs: state.tabs
                            };
                        });
                    }
                }
                this.setState({ loading: false });
            }).catch(({ message, stack }) => {
                this.setState({ loading: false });
                if (message) {
                    toast({
                        color: "warning",
                        content: message
                    })
                }
                if (stack) {
                    throw new Error(stack);
                }
            })
        });
    }

    onSearch = ({ dateRanger: { beginValue, endValue} = {}, queryParams = {} } = {}) => {
        let { meta } = this.props;
        const { tabActive } = this.state;

        this.queryParams = {
            ...queryParams
        };

        if (endValue > 0) {
            if (tabActive.queryId) {
                this.queryParams = Object.assign({}, this.queryParams, {
                    ...getBEDateQueryCondition({
                        beginValue,
                        endValue,
                        oprtype: 'between',
                        beginField: tabActive.queryTimeField || ''
                    })
                });
            } else {
                this.queryParams = Object.assign({}, this.queryParams, {
                    beginDate: beginValue.toString(),
                    endDate: endValue.toString(),
                });
            }
        }

        this.setState((state, props) => {
            return {
                pageInfo: {
                    ...state.pageInfo,
                    pageIndex: 1,
                }
            };
        });

        this.initData();
    }

    onPageInfoChange = ({ pageIndex, pageSize, total } = {}) => {
        let update = {};
        if (pageIndex >= 1) {
            update['pageIndex'] = pageIndex;
        }
        if (pageSize >= 1) {
            update['pageSize'] = pageSize;
        }
        if (total >= 0) {
            update['total'] = total;
        }
        this.setState((state, props) => {
            return {
                pageInfo: {
                    ...state.pageInfo,
                    ...update
                }
            };
        });
    }

    queryListAction = (params) => {
        let { meta } = this.props;
        let { tabActive, pageInfo } = this.state,
            url = `${tabActive.queryAction}`,
            metaInfo = meta.getMeta(),
            oid = metaInfo && metaInfo[tabActive['queryId']] && metaInfo[tabActive['queryId']].oid,
            tmp;

        if (tabActive.queryId) {
            // for template
            tmp = {
                oid,
                pageInfo,
                ...getBEDateQueryCondition({
                    beginValue: getCurDayStartTs(),
                    endValue: getCurDayEndTs(),
                    oprtype: 'between',
                    beginField: tabActive.queryTimeField || ''
                }),
            }
        } else {
            // for not template
            tmp = {
                pageSize: pageInfo.pageSize,
                pageNum: pageInfo.pageIndex,
                beginDate: getCurDayStartTs().toString(),
                endDate: getCurDayEndTs().toString()
            }
        }

        let body = {
            ...tmp,
            ...params
        };

        console.log('queryListAction: ', body)

        return hrAjax({
            url,
            body
        })
    }

    /**
     *  导入
     */
    onImport = (type) => {
        this.setState({
            showImportDialog: true
        })
    }

    /**
     *  导出
     */
    onExport = () => {
        const {
            state: {
                tabActive
            }
        } = this;

        if (tabActive.queryId) {
            this.onExportWithInQueryId();
        } else {
            this.onExportWithOutQueryId();
        }
    }

    /**
     * 查询模版的导出
     */
    onExportWithInQueryId = () => {
        const {
            state: {
                tabActive,
                pageInfo,
                lang
            },
            props: {
                meta,
                table
            }
        } = this,
            metaInfo = meta.getMeta();

        this.setState({ loading: true });
        this.queryListAction({
            ...this.queryParams,
            pageInfo: {
                pageIndex: 1,
                pageSize: pageInfo.total || 10,
            }
        }).then(({ success, data: {
            pageid,
            templetid,
            [tabActive.tableId]: {
                pageInfo: { total = 0 } = {},
                areacode,
                rows = []
            } = {}
        } = {} }) => {
            if (success) {
                rows.forEach((row) => {
                    for (let attrcode in row.values) {
                        if (row.values.hasOwnProperty(attrcode)) {
                            let item = row.values[attrcode];
                            item['value'] = formatValueByRow(row, attrcode, lang) || item['value'];
                        }
                    }
                });
                exportHtmlFunc(document.querySelector('.edit-table-wrap'), {
                    title: lang[tabActive.i18n],
                    fileName: lang[tabActive.i18n],
                    maker: lang['hrkq-0000098'],
                    date: lang['hrkq-0000099']
                }, {
                    meta: metaInfo[tabActive['tableId']],
                    data: rows,
                    showIndex: true
                })
            }
            this.setState({ loading: false });
        }).catch(({ message, stack }) => {
            this.setState({ loading: false });
            if (message) {
                toast({
                    color: "warning",
                    content: message
                })
            }
            if (stack) {
                throw new Error(stack);
            }
        })
    }

    /**
     * 非查询模版的导出
     */
    onExportWithOutQueryId = () => {
        let { tabActive, pageInfo } = this.state,
            url = tabActive.exportAction,
            queryKeys = ['beginDate', 'endDate', 'orgId', 'deptId', 'jobId', 'userName', 'isIncludeSub'],
            queryParams = {
                beginDate: getCurDayStartTs().toString(),
                endDate: getCurDayEndTs().toString(),
                isIncludeSub: true,
                ...this.queryParams,
                ...formatQueryCondition(this.queryParams && this.queryParams.querycondition, {
                    pk_org: 'orgId',
                    pk_dept: 'deptId',
                    pk_job: 'jobId',
                    fill_date: ['beginDate', 'endDate']
                })
            };

        queryKeys.forEach(item => {
            let key = item.key || item,
                alias = item.alias || item;

            if (queryParams &&
                queryParams[key] !== undefined) {
                url += `${(/\?/.test(url) ? '&' : '?')}${alias}=${queryParams[key]}`;
            }
        })

        console.log('onExport: ', this.queryParams, queryParams, url);
        const body = getUrlParam(url);
        formDownLoad({
            url,
            body,
            method: 'get',
            enctype: 1
        })
    }

    onResize = () => {
        /**
        * 节流算法优化，固定时间内频繁执行，只执行第一次
        * rongqb 20190425
        */
        if (!this.onResizeTimer) {
            let size = getClientSize();

            this.setState({
                window: size
            });
        }
        clearTimeout(this.onResizeTimer);
        this.onResizeTimer = setTimeout(() => {
            this.onResizeTimer = null;
        }, 100);
    }

    componentDidMount(){
        if (window.location.href.match(/(localhost|127\.0\.0\.1)/)) window.location.hash = `#ifr?page=20191225161616`;
        this.initTempalte(this.initData);
        this.onResize();
        window.addEventListener('resize', this.onResize);
    }

    componentWillUnmount(){
        document.removeEventListener('resize', this.onResize);
    }

    onButtonClick = (props, btncode)=>{
        if (btncode === 'file') {
            // const formId = this.state.tabActive['cardId']
            const billVal = props.form.getFormItemsValue('outside_card', 'pk_outside')
            const billId = billVal && billVal.value
            this.setState({
                billId,
                showUploader: true
            })
        }
    }

    onHideUploader = () => {
        this.setState({
            showUploader: false
        })
    }

    render(){
        const {
            props = {},
            props: {
                meta,
                search: { NCCreateSearch },
                editTable: { createEditTable },
                table: { createSimpleTable },
                form: { setFormStatus, setAllFormValue, EmptyAllFormValue, getFormItemsValue }
            },
            state,
            state: {
                tabs,
                lang,
                dist,
                window,
                loading,
                pageInfo,
                tabActive,
                importType,
                showImportDialog,
                showUploader,
                billId
            }
        } = this;

        let metaInfo = meta.getMeta(),
            queryOid = metaInfo && metaInfo[tabActive['queryId']] && metaInfo[tabActive['queryId']].oid;

        return (
            <div class={`container-wrap`}>
                <div style={{ display: dist == 'list' ? '' : 'none' }}>
                    {/* header */}
                    <Header
                        { ...props }
                        lang={lang}
                        queryOid={queryOid}
                        title={metaInfo.name}
                        queryId={tabActive.queryId}
                        tabActive={tabActive}
                        onSearch={this.onSearch}
                    />

                    {/* tabs */}
                    <div class="tabs-nav-bar">
                        {/* tabs */}
                        <NCTabs
                            navtype="turn"
                            tabBarPosition="top" //tab头的定位，可以是['left','right','top','bottom']中选择
                            contenttype="moveleft"
                            activeKey={tabActive.id} //设置当前激活的tabPanel的key
                            onChange={this.onTabChange}>
                            {tabs.map((tab, index) => {
                                let params = {
                                    lang,
                                    tabActive,
                                    cardId: tab.cardId,
                                    tableId: tab.tableId,
                                    height: Math.max(window.height - 188, 300),
                                    data: tab.data,
                                    onRowDoubleClick: (row, index, props) => {
                                        EmptyAllFormValue(tabActive.cardId);
                                        this.setState({
                                            dist: 'detail'
                                        });
                                        setFormStatus(tabActive.cardId, 'browse');
                                        setAllFormValue({
                                            [tabActive.cardId]: {
                                                rows: [row]
                                            }
                                        })
                                        this.showDeailFileBtn(tabActive.cardId === 'outside_card')
                                    }
                                };
                                return (<NCTabPane tab={lang[tab.i18n]} key={tab.id}>
                                    {(function (id) {
                                        switch (id) {
                                            case 'abnormal':
                                                return (<TableAbnormal {...props} {...params} />);
                                            case 'details':
                                                return (<TableDetails {...props} {...params} />);
                                            case 'outside':
                                            case 'attendance':
                                            default:
                                                return (<EditTable {...props} {...params} />);
                                        }
                                    })(tab.id)}
                                </NCTabPane>);
                            })}
                        </NCTabs>

                        <div class="btn-group">
                            {tabActive.exportTemplate &&
                                <span class="import-btn-groups">
                                    <NCButton size="lg" shape="border" colors="primary">
                                        {lang['hrkq-0000084']}
                                    </NCButton>
                                        <ul class="import-list">
                                            {[
                                                {
                                                    i18n: 'hrkq-0000086', // 原始导入
                                                    type: '2'
                                                },
                                                {
                                                    i18n: 'hrkq-0000087', // 考勤机导入
                                                    type: '3'
                                                },
                                            ].map(item => {
                                                return (
                                                    <li onClick={()=>{
                                                        this.setState({
                                                            showImportDialog: true,
                                                            importType: item.type
                                                        })
                                                    }}> {lang[item.i18n]} </li>
                                                )
                                            })}
                                        </ul>
                                </span>
                            }
                            <NCButton size="lg" shape="border" colors="info" onClick={this.onExport}>{lang['hrkq-0000085']}</NCButton>
                        </div>
                    </div>


                    {/* pagination */}
                    <div className="pagination" style={{ margin: '20px 10px 10px' }}>
                        {parseInt(pageInfo.total || 0) > 0 ?
                            <Pagination
                                total={pageInfo.total}
                                pageSize={pageInfo.pageSize}
                                showQuickJumper={true}
                                showSizeChanger={true}
                                current={pageInfo.pageIndex}
                                onChange={(pageIndex) => {
                                    this.onPageInfoChange({
                                        pageIndex
                                    });
                                    this.initData();
                                }}
                                onShowSizeChange={(pageSize) => {
                                    this.onPageInfoChange({
                                        pageSize,
                                        pageIndex: 1
                                    });
                                    this.initData();
                                }}
                            /> : null}
                    </div>
                </div>
                <div style={{ display: dist == 'list' ? 'none' : '' }}>
                    <Form
                        {...props}
                        cardId={tabActive['cardId']}
                        customButton={true}
                        buttonArea={'head'}
                        onButtonClick={this.onButtonClick}
                        title={metaInfo && metaInfo[tabActive['cardId']] && metaInfo[tabActive['cardId']].name || ''}
                        onBack={() => {
                            this.showDeailFileBtn(false)
                            this.setState({
                                dist: 'list'
                            })
                        }}
                    />
                </div>

                {/* loading */}
                <NCLoading
                    container={this}
                    show={loading} >
                </NCLoading>
                {/* fileUpload */}
                {showUploader && <NCUploader
                    billId={billId}
                    //getGroupList={this.getGroupList}
                    onHide={this.onHideUploader} // 关闭功能
                />
                }

                {/*  ImportDialog */}
                {
                    tabActive.exportTemplate &&  <ImportDialog
                        lang={lang}
                        {...props}
                        isShow={showImportDialog}
                        type={importType}
                        exportTemplate={tabActive.exportTemplate}
                        onHide={() => {
                            this.setState({
                                showImportDialog: false
                            })
                        }}
                        onSucess={() => {
                            this.setState({
                                showImportDialog: false
                            });
                            this.initData();
                        }}
                    />
                }
            </div>
        );
    };
}
